
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>首页</title>
  <link rel="stylesheet" href="/admin/src/css/layui.css">
</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">
	  <!--1.头部区域-->
	  <div class="layui-header">
		<div class="layui-logo">充电站管理系统</div>
		
		<ul class="layui-nav layui-layout-right">
		  <li class="layui-nav-item"><a href="/admin/login/loginOut">退出登录</a></li>
		</ul>
	  </div>
	  
	  <div class="layui-side layui-bg-black">
	      <div class="layui-side-scroll">
	          <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
	          <ul class="layui-nav layui-nav-tree" lay-filter="test">
					{volist name='menuList' id='menu'}
						<li class="layui-nav-item ">
							<a class="" href="javascript:;">{$menu.menu_name}</a>
							{volist name="$menu['son_list']" id='son_menu'}
							<dl class="layui-nav-child">
								 <dd style="cursor: pointer;" class="leftdaohang "  data-url="{$son_menu.route}"  mytitle="{$son_menu.menu_name}"><a>{$son_menu.menu_name}</a></dd>
							</dl>
							{/volist}
						</li>
					{/volist}
	          </ul>
	      </div>
	  </div>
	  
	  <!--3.右侧主体内容区-->
	  <div class="layui-body" style="margin-bottom:-50px;" >
		  <!--tabs标签-->
		  <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
		  <ul class="layui-tab-title">
	   <!-- <li class="layui-this" lay-id=""><i class="layui-icon">&#xe68e;</i> <cite>后台首页</cite></li>-->
		  </ul>
		  <div class="layui-tab-content">
		  <!-- <div class="layui-tab-item layui-show">
					<iframe style='width: 100%;margin-top:0px;border:none;' height='550' src='setting/usercenter.php' ></iframe>
				</div>-->
		  </div>
		</div> 
	  </div>
	  

	</div>
	
	<script src="/admin/src/layui.js" ></script>
	<script>
		//添加事件执行
		layui.use('element', function(){
		  var $ = layui.jquery
		  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		  //触发事件
		  var active = {
			tabAdd: function(){
			  //新增一个Tab项
			  var htmlurl=$(this).attr('data-url');
			  var mytitle=$(this).attr('mytitle'); 
//                  alert("触发tab增加事件："+mytitle);
			  //先判断是否已经有了tab
			  var arrayObj = new Array();　//创建一个数组  
				  $(".layui-tab-title").find('li').each(function() {
					  var y = $(this).attr("lay-id"); 
					  arrayObj.push(y);
			   });
//                    alert("遍历取到的数组："+arrayObj);
				var have=$.inArray(mytitle, arrayObj);  //返回 3,
				if (have>=0) {
					//tab已有标签
//                        alert("遍历的已有标签："+mytitle);
				  element.tabChange('demo', mytitle); //切换到当前点击的页面
				} else{
					var h = $(window).height()-150;
				  //没有相同tab
//                      alert("遍历的没有相同tab："+mytitle);
				  element.tabAdd('demo', {
					title:mytitle //用于演
					,content: '<iframe style="width: 100%;height:'+h+'px;margin-top:0px;border:none;" scrolling="auto" src='+htmlurl+' ></iframe>'
					,id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
				  })
				  element.tabChange('demo', mytitle); //切换到当前点击的页面
				}
			}
		   
		  };
		 //这里是实现点击竖式选项卡，执行添加
		  $(".leftdaohang").click(function(){
			var type="tabAdd";
			var othis = $(this);
//                var htmlurl=$(this).attr('data-url');
//                var mytitle=$(this).attr('mytitle');
			active[type] ? active[type].call(this, othis) : '';
		  });
		 //这里是实现点击顶部选项卡之后，显示或隐藏对应的竖式选项卡
		 $('.showtab').click(function(){
			var dataid=$(this).attr('data-id');
			var dataids=document.getElementById(dataid);
			var tabs=document.getElementsByName('tabs');
			$(tabs).hide();
			$(dataids).show();
		})
		});
	</script>


</body>
</html>
